<template>
  <div>
<button @click="fn">点我激活input</button>
<input ref="ipt" v-if="isShow" type="text">

  </div>
</template>

<script>
  export default {
data() {
  return {
  isShow:false  
  }
  },
methods: {
  fn(){
    this.isShow = true
    //改为true之后，vue要创建input元素
    //在vue中dom元素的更新是异步的，所以此时拿到的this.$refs.ipt是undefined

    //console.log('  ----->  ', this.$refs.ipt);//undefined
    //此时拿到的是undefined，并且不会激活input
    // this.$refs.ipt.focus()

    //解决办法：使用$nextTick
    this.$nextTick(()=>{
     //$nextTick是Vue的一个实例方法，
      //作用是：等dom元素更新完毕之后，执行回调函数
      ///Vue中dom元素的更新是异步的
      this.$refs.ipt.focus()
      console.log('  ----->  ', this.$refs.ipt)
    })
  }
}
  }
</script>

<style lang="scss" scoped>

</style>